<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生成绩管理系统 - 登录</title>
  <link rel="stylesheet" href="/public/lib/element-ui/index.css">
  <script src="/public/lib/vue.js"></script>
  <script src="/public/lib/element-ui/index.js"></script>
  <script src="/public/lib/axios.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      background-color: #f5f5f5;
    }
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .card {
      width: 400px;
      padding: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background-color: #fff;
    }
    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #409EFF;
    }
    .form-item {
      margin-bottom: 22px;
    }
    .button-group {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }
    .link-text {
      text-align: center;
      margin-top: 20px;
      color: #606266;
      font-size: 14px;
    }
    .link-text a {
      color: #409EFF;
      text-decoration: none;
    }
    .link-text a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="container">
    <!-- 注册表单 -->
    <div class="card" v-if="currentView === 'register'">
      <h2 class="title">用户注册</h2>
      <el-form :model="registerForm" :rules="registerRules" ref="registerForm" label-width="80px">
        <el-form-item label="用户名" prop="username" class="form-item">
          <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="form-item">
          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" class="form-item">
          <el-input v-model="registerForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role" class="form-item">
          <el-select v-model="registerForm.role" placeholder="请选择角色" style="width: 100%;">
            <el-option label="请选择" value=""></el-option>
            <el-option label="教师" value="1"></el-option>
            <el-option label="学生" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <div class="button-group">
          <el-button type="primary" @click="handleRegister" style="width: 100%;">注册</el-button>
        </div>
      </el-form>
      <div class="link-text">
        已有账号？<a href="#" @click.prevent="switchToLogin">立即登录</a>
      </div>
    </div>

    <!-- 登录表单 -->
    <div class="card" v-if="currentView === 'login'">
      <h2 class="title">学生成绩管理系统</h2>
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="80px">
        <el-form-item label="用户名" prop="username" class="form-item">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="form-item">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <div class="button-group">
          <el-button type="primary" @click="handleLogin" style="width: 100%;">登录</el-button>
        </div>
      </el-form>
      <div class="link-text">
        没有账号？<a href="#" @click.prevent="switchToRegister">立即注册</a>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        currentView: 'login',
        registerForm: {
          username: '',
          password: '',
          name: '',
          role: ''
        },
        loginForm: {
          username: '',
          password: ''
        },
        registerRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码长度至少6位', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          role: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ]
        },
        loginRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      switchToRegister() {
        this.currentView = 'register';
      },
      switchToLogin() {
        this.currentView = 'login';
      },
      handleRegister() {
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            axios.post('/api/register', this.registerForm)
                    .then(response => {
                      if (response.data.success) {
                        this.$message({
                          message: '注册成功，请登录',
                          type: 'success'
                        });
                        this.currentView = 'login';
                        this.$refs.registerForm.resetFields();
                      } else {
                        this.$message.error(response.data.message || '注册失败');
                      }
                    })
                    .catch(error => {
                      this.$message.error('注册失败，请稍后重试');
                      console.error('注册错误:', error);
                    });
          } else {
            return false;
          }
        });
      },
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            axios.post('/api/login', this.loginForm)
                    .then(response => {
                      if (response.data.success) {
                        this.$message({
                          message: '登录成功',
                          type: 'success'
                        });
                        // 跳转到主页面
                        window.location.href = '/main';
                      } else {
                        this.$message.error(response.data.message || '登录失败');
                      }
                    })
                    .catch(error => {
                      this.$message.error('登录失败，请稍后重试');
                      console.error('登录错误:', error);
                    });
          } else {
            return false;
          }
        });
      }
    }
  });
</script>
</body>
</html>